Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Serverless] Fix truncation in breadcrumbs #171770

Merged
merged 1 commit into from
Nov 23, 2023

Conversation

Dosant
Copy link
Contributor

@Dosant Dosant commented Nov 22, 2023

Summary

Fix truncation in breadcrumbs when the header doesn't fit: https://css-tricks.com/flexbox-truncated-text/
I noticed this issue while working on #170758

(look at breadcrumbs)

Screen.Recording.2023-11-22.at.17.26.35.mov

Note: the root breadcrumb will be fixed with EUI update elastic/eui#7375

@@ -62,6 +62,17 @@ const getHeaderCss = ({ size }: EuiThemeComputed) => ({
top: 2px;
`,
},
leftHeaderSection: css`
// needed to enable breadcrumbs truncation
min-width: 0;
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@Dosant Dosant changed the title fix bredcrumbs ellipsis [Serverless] Fix truncation in breadcrumbs Nov 22, 2023
@Dosant Dosant added release_note:skip Skip the PR/issue when compiling release notes Team:SharedUX Team label for AppEx-SharedUX (formerly Global Experience) Project:Serverless Work as part of the Serverless project for its initial release Feature:Chrome Core's Chrome UI (sidenav, header, breadcrumbs) labels Nov 22, 2023
@Dosant Dosant marked this pull request as ready for review November 22, 2023 16:31
@Dosant Dosant requested a review from a team as a code owner November 22, 2023 16:31
@elasticmachine
Copy link
Contributor

Pinging @elastic/appex-sharedux (Team:SharedUX)

@kibana-ci
Copy link
Collaborator

kibana-ci commented Nov 22, 2023

💛 Build succeeded, but was flaky

Failed CI Steps

Metrics [docs]

Async chunks

Total size of all lazy-loaded chunks that will be downloaded as the user navigates the app

id before after diff
apm 3.7MB 3.7MB +69.0B
canvas 1013.8KB 1013.8KB +27.0B
dashboard 377.2KB 377.3KB +68.0B
dataViewManagement 119.9KB 120.0KB +52.0B
discover 589.0KB 589.0KB +27.0B
enterpriseSearch 2.6MB 2.6MB +62.0B
eventAnnotationListing 196.9KB 196.9KB +51.0B
exploratoryView 203.4KB 203.4KB +51.0B
filesManagement 90.0KB 90.0KB +51.0B
graph 388.2KB 388.3KB +51.0B
home 164.8KB 164.8KB +51.0B
indexLifecycleManagement 144.8KB 144.8KB +51.0B
indexManagement 585.0KB 585.0KB +29.0B
infra 1.9MB 1.9MB +62.0B
kibanaOverview 46.6KB 46.6KB +51.0B
lens 1.4MB 1.4MB +68.0B
management 75.1KB 75.2KB +51.0B
maps 2.9MB 2.9MB +51.0B
metricsDataAccess 59.5KB 59.5KB +27.0B
ml 3.6MB 3.6MB +62.0B
monitoring 462.5KB 462.5KB +52.0B
observability 1.1MB 1.1MB +51.0B
observabilityAIAssistant 209.1KB 209.2KB +51.0B
observabilityOnboarding 243.7KB 243.7KB +47.0B
observabilityShared 36.3KB 36.3KB +27.0B
osquery 1.0MB 1.0MB +27.0B
profiling 359.6KB 359.6KB +66.0B
savedObjectsManagement 82.2KB 82.3KB +62.0B
security 569.3KB 569.3KB -13.0B
securitySolution 12.8MB 12.8MB +54.0B
securitySolutionEss 42.7KB 42.7KB +27.0B
securitySolutionServerless 336.9KB 336.9KB +27.0B
synthetics 868.2KB 868.3KB +51.0B
upgradeAssistant 155.1KB 155.1KB -1.0B
uptime 480.8KB 480.8KB +62.0B
ux 168.8KB 168.9KB +51.0B
visTypeTimeseries 511.8KB 511.9KB +61.0B
visualizations 268.1KB 268.1KB +68.0B
total +1.7KB

Page load bundle

Size of the bundles that are downloaded on every page load. Target size is below 100kb

id before after diff
cloudDefend 9.0KB 9.0KB +62.0B
cloudSecurityPosture 14.9KB 15.0KB +62.0B
core 374.1KB 374.4KB +345.0B
data 414.4KB 414.5KB +62.0B
esUiShared 155.8KB 155.9KB +52.0B
fleet 151.9KB 151.9KB +62.0B
kibanaReact 42.2KB 42.2KB +52.0B
security 70.3KB 70.4KB +59.0B
spaces 24.7KB 24.7KB +62.0B
upgradeAssistant 22.4KB 22.5KB +62.0B
total +880.0B

History

To update your PR or re-run it, just comment with:
@elasticmachine merge upstream

Copy link
Contributor

@eokoneyo eokoneyo left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Whilst I'd hoped we wouldn't have this component accept props that are presentational, I think this specific use case highlights that it's current implementation will at some point run into limitations.

Well done @Dosant! Tested locally, changes LGTM;
Screenshot 2023-11-23 at 15 35 59

@Dosant Dosant merged commit 274b4f4 into elastic:main Nov 23, 2023
9 checks passed
@Dosant Dosant self-assigned this Nov 23, 2023
@kibanamachine kibanamachine added v8.12.0 backport:skip This commit does not require backporting labels Nov 23, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
backport:skip This commit does not require backporting Feature:Chrome Core's Chrome UI (sidenav, header, breadcrumbs) Project:Serverless Work as part of the Serverless project for its initial release release_note:skip Skip the PR/issue when compiling release notes Team:SharedUX Team label for AppEx-SharedUX (formerly Global Experience) v8.12.0
Projects
None yet
Development

Successfully merging this pull request may close these issues.

5 participants